<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>响应</title>
    </head>
    <body>

        <h1>响应</h1>

        <p>
            <a href="/normal/status">Normal Status</a>
            |
            <a href="/error/status">Error Status</a>
        </p>

        <p>
            <a href="/content?type=html">HTML</a>
            |
            <a href="/content?type=text">Plain Text</a>
            |
            <button type="button">点我试试</button>
        </p>

        <script type="text/javascript">
            ( function(){
                let btn = document.querySelector( "[type=button]" );
                let listener = function(){
                    const url = "/content?type=html" ;

                    let $http = new XMLHttpRequest();

                    $http.onreadystatechange = function(){
                        if( $http.readyState === 4 ) {
                            console.log( $http.status , $http.statusText );
                            console.log( $http.getAllResponseHeaders() );
                            console.log( "\n" );
                            console.log( $http.responseText );
                        }
                    }

                    $http.open( "GET" , url );

                    $http.send( null );

                }
                btn.addEventListener( "click" , listener , false );
            } )();
        </script>

        <p>
            <a href="/show/image">展示图片</a>
            |
            <a href="/download/image">下载图片</a>
            |
            <a href="/download/text">下载文件</a>
        </p>

    </body>
</html>